<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="数据管理"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <div class="search-box">
            <div class="search-input-box">
                <img
                    class="search-icon"
                    src="@/assets/images/home/search.png"
                />
                <input
                    class="search-input"
                    placeholder="请输入搜索内容"
                    v-model="searchKey"
                />
            </div>
            <div
                class="search-btn"
                @click="search"
            >搜索</div>
        </div>

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="teamList"
            @pullup="loadMore"
        >

            <div
                class="team-empty-tips"
                v-if="teamList.length == 0"
            >{{emptyTips}}</div>

            <div
                class="team-item"
                v-for="(item,index) of teamList"
                :key="index"
            >
                <div class="team-img-box">
                    <img
                        class="item-img"
                        :src="item.face"
                    />
                </div>
                <div class="team-info">
                    <div class="team-name">{{item.nick_name}}<span class="team-id">ID:{{item.id}}</span></div>
                    <div class="team-time">推荐时间：{{item.add_time}}</div>
                    <a
                        class="concat-btn"
                        :href="'tel:'+item.mobile_phone"
                        v-if="item.mobile_phone != null && $route.query.type == 'myData'"
                    >联系他</a>
                    <!-- <div
                        class="team-set"
                        v-if="item.is_vip == 1"
                    >
                        <div
                            class="team-set-btn"
                            @click="setProvider(item.id)"
                            v-if="userAccountInfo.service_quota>0 && item.agent < 2"
                        >设置为服务商</div>
                        <div
                            class="team-set-btn"
                            @click="setShopKeeper(item.id)"
                            v-if="userAccountInfo.store_quota>0 && item.agent < 1"
                        >设置为店主</div>
                    </div> -->
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'TeamList',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '2.35rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            teamList: [],
            searchKey: '',
            emptyTips: '正在全力加载中...',
            nowPage: 1,
            totalPage: 1,
            isLoading: false
        }
    },
    mounted() {
        this.getTeamList()
    },
    methods: {
        getTeamList() {
            if (this.$route.query.type == 'myData') {
                this.isLoading = true
                let postData = this.qs.stringify({
                    level: this.$route.query.level,
                    page_size: 20,
                    page: this.nowPage
                })
                this.axios
                    .post(
                        '/api/user/data_center/direct_user_list.json',
                        postData
                    )
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            if (data.data.list.length == 0) {
                                this.emptyTips = '暂无数据'
                            }
                            this.teamList = this.teamList.concat(data.data.list)
                            this.totalPage = Math.ceil(
                                data.data.page_info.total / 20
                            )
                            this.nowPage++
                            this.isLoading = false
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
            } else {
                this.isLoading = true
                let postData = this.qs.stringify({
                    level: this.$route.query.level,
                    page_size: 20,
                    page: this.nowPage
                })
                this.axios
                    .post('/api/user/data_center/team_user_list.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            if (data.data.list.length == 0) {
                                this.emptyTips = '暂无数据'
                            }
                            this.teamList = this.teamList.concat(data.data.list)
                            this.totalPage = Math.ceil(
                                data.data.page_info.total / 20
                            )
                            this.nowPage++
                            this.isLoading = false
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
            }
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getTeamList()
            }
        },
        search() {
            this.teamList = []
            this.nowPage = 1
            this.totalPage = 1
            this.emptyTips = '正在全力加载中...'
            let postData = this.qs.stringify({
                level: this.$route.query.level,
                key: this.searchKey,
                page_size: 9999,
                page: this.nowPage
            })
            this.axios
                .post('/api/user/data_center/team_user_list.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        if (data.data.list.length == 0) {
                            this.emptyTips = '暂无数据'
                        }
                        this.teamList = this.teamList.concat(data.data.list)
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 10
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        setProvider(id) {
            const that = this
            this.commonDialog.confirm(
                '提示',
                '是否确认设置为服务商？',
                function() {
                    let postData = that.qs.stringify({
                        id: id,
                        agent: 2
                    })
                    that.axios
                        .post('/api/user/agent/set_agent.json', postData)
                        .then(res => {
                            const data = res.data
                            if (data.status == 1) {
                                that.commonDialog.alert(
                                    '提示',
                                    '成功设置服务商！',
                                    function() {
                                        window.location.reload()
                                    }
                                )
                            } else {
                                that.commonDialog.alert('提示', data.msg)
                            }
                        })
                }
            )
        },
        setShopKeeper(id) {
            const that = this
            this.commonDialog.confirm(
                '提示',
                '是否确认设置为店主？',
                function() {
                    let postData = that.qs.stringify({
                        id: id,
                        agent: 1
                    })
                    that.axios
                        .post('/api/user/agent/set_agent.json', postData)
                        .then(res => {
                            const data = res.data
                            if (data.status == 1) {
                                that.commonDialog.alert(
                                    '提示',
                                    '成功设置店主！',
                                    function() {
                                        window.location.reload()
                                    }
                                )
                            } else {
                                that.commonDialog.alert('提示', data.msg)
                            }
                        })
                }
            )
        },
        cancleAgent(id) {
            const that = this
            this.commonDialog.confirm(
                '提示',
                '是否确认取消代理商？',
                function() {
                    let postData = that.qs.stringify({
                        id: id,
                        agent: 0
                    })
                    that.axios
                        .post('/api/user/agent/set_agent.json', postData)
                        .then(res => {
                            const data = res.data
                            if (data.status == 1) {
                                that.commonDialog.alert(
                                    '提示',
                                    '成功取消代理商！',
                                    function() {
                                        window.location.reload()
                                    }
                                )
                            } else {
                                that.commonDialog.alert('提示', data.msg)
                            }
                        })
                }
            )
        }
    }
}
</script>

<style lang="stylus" scoped>
.search-box
    display flex
    align-items center
    padding 0 0.37rem
    height 1.2rem
    border-bottom 1px solid #e5e5e5
    background #fff
    .search-input-box
        display flex
        align-items center
        flex 1
        min-width 1px
        height 0.8rem
        padding 0 0.27rem
        border-radius 30px
        background #f5f5f5
        .search-icon
            width 0.6rem
            height 0.6rem
        .search-input
            flex 1
            min-width 1px
            margin-left 0.27rem
            border none
            outline none
            font-size 0.33rem
            color #666
            background #f5f5f5
    .search-btn
        margin-left 0.37rem
        width 1.6rem
        line-height 0.8rem
        text-align center
        background #d7463c
        font-size 0.28rem
        color #fff
        border-radius 3px
.team-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.team-item
    position relative
    display flex
    align-items center
    padding 0.37rem
    background #fff
    border-bottom 1px solid #e5e5e5
    .concat-btn
        position absolute
        top 1rem
        right 0.37rem
        width 2rem
        line-height 0.6rem
        text-align center
        background #d7463c
        font-size 0.33rem
        color #fff
        border-radius 30px
    .item-img
        width 1.06rem
        height 1.06rem
        border-radius 100%
    .team-info
        flex 1
        margin-left 0.37rem
        .team-name
            font-size 0.38rem
            color #333
            .team-id
                margin-left 0.37rem
                color #999
        .team-time
            margin-top 0.27rem
            font-size 0.33rem
            color #666
        .team-set
            margin-top 0.27rem
            display flex
            .team-set-btn
                margin-right 0.27rem
                width 2.5rem
                line-height 0.8rem
                text-align center
                background #d7463c
                font-size 0.32rem
                color #fff
                border-radius 3px
</style>


